<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <link rel="stylesheet" href="bootstrap-3.3.4/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="Flat-UI-master/dist/css/flat-ui.min.css"/>
    <script src="bootstrap-3.3.4/dist/js/jquery-3.5.1.min.js"></script>
    <script src="bootstrap-3.3.4/dist/js/jquery.cookie-1.4.1.min.js"></script>
    <script src="bootstrap-3.3.4/dist/js/bootstrap.min.js"></script>
    <script src="Flat-UI-master/dist/js/flat-ui.min.js"></script>
    <script src="custom/util.js"></script>

    <title>订单详情</title>
    <style>
        .row {
            margin-left: 20px;
            margin-right: 20px;;
        }

        .line-center {
            line-height: 50px;
            text-align: center;
        }

        .row input {
            width: 50px;
        }

        .list-group-item:hover {
            background: #27ae60;

        }

        .list-group-item div:first-child:hover {

            cursor: pointer;
        }

        th {
            text-align: right;
            width: 200px;;
        }

        td {
            text-align: left;
            padding: 10px;
        }

        .table th {
            text-align: center;
        }

        .table td {
            text-align: center;
        }
    </style>
    <script>
        // 凭空跳转
        function myClick(n) {
            location.href = "OrderDetail.html";
        }
        // 获取url中的参数: orderId
        function getOrderId() {
            return location.search.substring(1);
        }
    </script>
</head>

<body>
<script>
    $(function () {
        // 允许跨域传cookie
        $.ajaxSetup({crossDomain: true, xhrFields: {withCredentials: true}});

        // 发送请求要完整的数据
        const orderId = getOrderId();
        $.ajax({
            url: url + "/order/detail?orderId=" + orderId,
            type: "GET",
            success: function (res) {
                const data = res.data;
                $("td#orderId").text(orderId);
                $("td#description").text(data.description);
                $("td#when").text(data.when);
                $("td#location").text(data.location);
                $("td#sender").text(data.sender);
                $("td#phone").text(data.phone);
                $("td#comment").text(data.comment);
                $("span#price").text(data.price + " 元");
            },
            error: function () {
                alert("获取订单详情失败，请联系开发者解决问题");
            }
        });

        // 点了”接单“按钮
        $("#pick").click(function () {
            $.ajax({
                url: url + "/order/receiver/pick",
                data: {
                    orderId: orderId
                },
                type: "GET",
                success: function () {
                    location.assign("PickedOrder.html");
                },
                errot: function () {
                    alert("接单失败，请联系开发者解决问题");
                }
            })
        })


        // 注销
        $("#logout").click(function () {
            $("#pick").hide();
            $("#logout").hide();
            $("#register").show();
            $("#login").show();
            $.ajax({
                url: url + "/user/logout",
                success: function (data) {
                    console.log("log out success")
                },
                error: function () {
                    console.log("error");
                }
            });
        });

        // // 查看当前登录状态
        // if ($.cookie("JSESSIONID") === null) {
        //     $("#register").show();
        //     $("#login").show();
        // } else {
        //     $("#pick").show();
        //     $("#logout").show();
        // }

        // 老的方式，再次使用
        $.ajax({
            url: url + "/user/check",
            success: function (data) {
                if (data["flag"] === 2000) {
                    // 已经登录了
                    $("#logout").show();
                    $("#pick").show();
                } else {
                    // 还没登录
                    $("#register").show();
                    $("#login").show();
                }
            },
            error: function () {
                console.log("error");
            }
        });
    })
</script>

<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">这什么东西</span>
            </button>
            <a class="navbar-brand" href="Index.html">快递代取系统</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="Index.html">首页</a></li>
                <li><a href="NewOrder.html">创建订单</a></li>
                <li class="active"><a href="Order.html">我的订单</a></li>
                <li><a href="PickedOrder.html">我的接单</a></li>
                <li><a href="UserInfo.html">个人中心</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a id="login" href="Login.html" style="display: none;">登录</a></li>
                <li><a id="register" href="Register.html" style="display: none">注册</a></li>
                <li><a id="logout" href="#" style="display: none">注销</a></li>
                <li>
                    <a href="Cart.html"><span class="glyphicon glyphicon-shopping-cart">购物车</span></a>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

<!--content-->
<div class="container">
    <div class="row thumbnail center col-sm-12">
        <div class="col-sm-12">
            <h1 class="text-center" style="margin-bottom: 30px">订单详情</h1>
        </div>

        <div class="col-sm-12 ">
            <table>
                <tr>
                    <th>订单编号：</th>
                    <td id="orderId">...</td>
                </tr>

                <tr>
                    <th>订单描述：</th>
                    <td id="description">...</td>
                </tr>

                <tr>
                    <th>指定收件时间：</th>
                    <td id="when">...</td>
                </tr>

                <tr>
                    <th>收件地址：</th>
                    <td id="location">...</td>
                </tr>


                <tr>
                    <th>收件人姓名：</th>
                    <td id="sender">...</td>
                </tr>

                <tr>
                    <th>收件人电话：</th>
                    <td id="phone">...</td>
                </tr>

                <tr>
                    <th>备注：</th>
                    <td id="comment">...</td>
                </tr>


            </table>
        </div>


        <!--        <div class="col-sm-12">-->
        <!--            <table class="table table-striped table-condensed">-->
        <!--                <tr>-->
        <!--                    <th>书名</th>-->
        <!--                    <th>单价</th>-->
        <!--                    <th>数量</th>-->
        <!--                    <th>小计</th>-->
        <!--                </tr>-->
        <!--                <tr>-->
        <!--                    <td>书名</td>-->
        <!--                    <td>单价</td>-->
        <!--                    <td>数量</td>-->
        <!--                    <td>小计</td>-->
        <!--                </tr>-->
        <!--                <tr>-->
        <!--                    <td>书名</td>-->
        <!--                    <td>单价</td>-->
        <!--                    <td>数量</td>-->
        <!--                    <td>小计</td>-->
        <!--                </tr>-->
        <!--                <tr>-->
        <!--                    <td>书名</td>-->
        <!--                    <td>单价</td>-->
        <!--                    <td>数量</td>-->
        <!--                    <td>小计</td>-->
        <!--                </tr>-->
        <!--                <tr></tr>-->
        <!--            </table>-->
        <!--        </div>-->

        <div class="col-sm-12 ">
            <table>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <!--                    <th>商品总数：</th><td>12</td>-->
                    <th>订单总价：</th>
                    <td><span id="price" class="text-danger">...</span></label></td>
                </tr>
            </table>
        </div>
    </div>

    <div class="col-sm-offset-7 col-sm-5" style="padding: 30px;">
        <div class="col-sm-6 btn btn-success btn-block" id="pick" style="display: none">接单</div>
    </div>
</div>

<!--footer-->
<div class="navbar navbar-default navbar-static-bottom ">
    <p style="text-align: center">版权声明区</p>
</div>
</body>
</html>